<template>
  <view v-if="shenheStatus == 0" class="mobile">
    <view class="mobile-wrap">
      <u-form label-width="150" :model="form" ref="uForm">
        <u-form-item label="新手机号">
          <u-input v-model="form.mobile" placeholder="请输入手机号" />
        </u-form-item>
        <u-form-item label="验证码">
          <u-input v-model="form.code" placeholder="请输入验证码" />
          <template slot="right">
            <text class="get-code" @click="onClickGetCode">{{
              getCodeText
            }}</text>
            <u-verification-code
              :seconds="60"
              ref="uCode"
              @change="codeChange"
            ></u-verification-code>
          </template>
        </u-form-item>
      </u-form>
    </view>
    <view
      @click="onCLick"
      class="btn flex-y-center flex-x-center"
      :class="{ red: isRight }"
      >确认修改</view
    >
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from "@/components/shenhe/shenhe";
export default {
  components: { Shenhe },
  computed: {
    isRight: function () {
      if (this.$u.test.mobile(this.form.mobile) && this.form.code != "") {
        return true;
      }
      return false;
    },
  },
  data() {
    return {
      getCodeText: "获取验证码",
      form: {
        mobile: "",
        code: "",
      },
      params: {},
    };
  },
  onLoad(params) {
    this.params = params.params ? JSON.parse(decodeURIComponent(params.params)) : {};
  },
  methods: {
    codeChange(text) {
      this.getCodeText = text;
    },
    async onClickGetCode() {
      if (!this.$u.test.mobile(this.form.mobile))
        return this.$utils.toast("手机号错误");

      let userInfo = uni.getStorageSync("userInfo");
      if (userInfo.binding == this.form.mobile) {
        return this.$utils.toast("当前手机号未做修改");
      }
      if (this.$refs.uCode.canGetCode) {
        // 模拟向后端请求验证码
        uni.showLoading({
          title: "正在获取验证码",
        });
        await this.$allrequest.user
          .sms_code({
            phone: this.form.mobile,
            code_type: "bind",
          })
          .catch((err) => uni.hideLoading());
        uni.hideLoading();
        // 这里此提示会被this.start()方法中的提示覆盖
        this.$u.toast("验证码已发送");
        // 通知验证码组件内部开始倒计时
        this.$refs.uCode.start();
      } else {
        this.$u.toast("倒计时结束后再发送");
      }
    },
    async onCLick() {
      if (!this.$u.test.mobile(this.form.mobile)) {
        this.$u.toast("请输入正确的手机号");
        return;
      }
      if (this.form.code == "") {
        this.$u.toast("请输入验证码");
        return;
      }
      // 这里走的是修改手机号
      if (!this.params.nickname) {
        uni.showLoading({
          title: "修改中",
        });
        let formData = {
          mobile: this.form.mobile,
          code: this.form.code,
        };
        const res = await this.$allrequest.user
          .updateMobile(formData)
          .catch((err) => uni.hideLoading());
        uni.hideLoading();
        if (res.code == 0) {
          this.$u.toast(res.msg);
          setTimeout(() => {
            if (this.params.token) {
              this.loginBack();
            } else {
              this.$utils.goBack(-2);
            }
          }, 2000);
        }
      }

      // 这里是绑定手机号
      else {
        let result = await this.getCodeAsync();
        let formData = {
          nickname: this.params.nickname,
          avatar_url: this.params.avatar_url,
          verify_code: this.form.code,
          phone: this.form.mobile,
          code: result.code,
        };
        let res = await this.$allrequest.user.auth_phone(formData, true);
        // 登录失败
        if (res.code != 0) {
          uni.showToast({
            title: res.msg,
            icon: "none",
            duration: 1000,
          });
          return;
        } else {
          //登录成功
          this.afterLogin(res);
        }
      }
    },
    loginBack() {
      if (this.params.noLoginTabarPath && this.params.routeType) {
        this.$utils.toUrl(this.params.noLoginTabarPath, this.params.routeType);
        setTimeout(() => {
          this.$store.commit("setNoLoginTabarPath", "");
          this.$store.commit("setRouteType", "");
        }, 0);
      } else {
        this.$utils.goBack(-2);
      }
    },
    afterLogin(result) {
      uni.setStorageSync("token", result.data.access_token);

      uni.showToast({
        title: result.msg,
        duration: 1000,
        icon: "none",
      });
      setTimeout(() => {
        uni.setStorageSync("userInfo", result.data);
        this.$store.commit("setUserInfo", result.data);
        // this.$utils.toUrl("/pages/my/my", "switchtab");
        this.loginBack();
      }, 1000);
    },
    getCodeAsync() {
      return new Promise((resolve, reject) => {
        uni.login({
          success: (result) => {
            return resolve(result);
          },
          fail: (err) => {
            reject(err);
          },
          complete: () => {},
        });
      });
    },
  },
};
</script>

<style scoped>
.mobile {
  min-height: 100vh;
  background: #f2f2f2;
}
.mobile-wrap {
  background-color: #fff;
  padding: 0 20rpx;
}
.get-code {
  font-size: 28rpx;
  color: #f0250e;
}
.btn {
  margin: 0 auto;
  margin-top: 100rpx;
  width: 678rpx;
  height: 88rpx;
  background: rgb(173, 173, 173);
  border-radius: 120rpx;
  font-size: 32rpx;
  font-weight: 500;
  color: #ffffff;
}
.btn.red {
  background-color: #f0250e;
}
</style>
